<template>
  <v-overlay persistent>
    <div class="buy-dialog-content pa-6" v-if="detail">
      <v-row class="dialog-header flex justify-space-between">
        兑换商品
        <i class="el-icon-close" v-show="!loading" @click="close"></i>
      </v-row>

      <div class="dialog-shop">
        <img :src="detail.image_url" />
        <div class="dialog-shop-right">
          <div class="detail-name">{{ detail.item_name }}</div>
          <div class="detail-info">
            {{ detail.price }}T币
          </div>
          <div v-if="userInfo">剩余T币：{{ userInfo.diamond }}</div>
        </div>
      </div>

      <v-row class="justify-center mt-3">
        <v-btn variant="outlined" @click="handleClick" v-loading="loading">确认兑换</v-btn>
      </v-row>
    </div>
  </v-overlay>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useStore } from "@/store";
import ShopService from "@/services/ShopService";

export default defineComponent({
  props: {
    detail: {
      type: Object,
      default: null,
    },
  },

  setup() {
    return {
      store: useStore(),
      loading: ref(false),
    };
  },

  methods: {
    handleClick() {
      if (!this.userInfo) {
        this.$notify.warning("请登录后兑换");
        return;
      }
      this.buy();
    },

    buy() {
      this.loading = true;
      ShopService.buy({
        skin_id: this.detail.id,
      }).then(() => {
        this.$notify.success("兑换成功");
        this.$store.dispatch("getUserInfo");
        this.close();
      }).finally(() => {
        this.loading = false;
      })
    },
    
    close() {
      this.$emit("close");
    }
  },

  computed: {
    userInfo() {
      return this.store.getters.userInfo;
    },
  },
});
</script>

<style scoped lang="scss">
.buy-dialog-content {
  min-width: 44rem;
  font-size: 30px;
  background: #36363c;
  color: #fff;
  font-size: 12px;

  .dialog-header {
    font-size: 15px;
    justify-content: space-between;
    height: 3.25rem;

    i {
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }
  }
}

.dialog-shop {
  display: flex;
  padding: 2rem 1rem;
  margin-top: 12px;

  img {
    width: 10rem;
    margin-right: 1rem;
  }

  .dialog-shop-right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .detail-name {
    font-size: 1.5rem;
    font-weight: bold;
  }

  .detail-info {
    color: rgb(118, 104, 203);
    font-size: 1.2rem;
  }
}
</style>
